<template>
    <div class="container">
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button class="item" @click="increase(n)">加</button>
        <button class="item" @click="decrease(n)">减</button>
        <button class="item" @click="oodAdd(n)">奇数加</button>
        <button class="item" @click="waitAdd(n)">等1s再加</button>
        <span class="item">相加的和为：{{number}}</span>
        <h2>相加的和大10倍：{{bigNumber}}</h2>
        <h2>我在{{school}}学习{{subject}}</h2>
        <hr>
        <span>这是一条来自getters的数据 {{msg}}</span>
        <h1>学生的总数为：{{students.length}}</h1>
    </div>    
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: 'Count',
    data() {
        return  {
            n: 1,
        }
    },
    computed: {
        // number() {
        //     return this.$store.getters.number
        // },
        // msg() {
        //     return this.$store.getters.msg
        // }
        // xuexiao() {
        //     return this.$store.state.school
        // },
        // xueke() {
        //     return this.$store.state.subject
        // },
        // state对象写法， 计算属性的名字和state中的名字不一致时使用
        // ...mapState({ xuexiao: 'school', xueke: 'subject' }),
        // state数组写法
        ...mapState('countAbout', ['number','school','subject']),
        ...mapState('studentAbout', ['students']),
        // getters数组写法
        // ...mapGetters(['number', 'msg', 'bigNumber'])
        // getters对象写法
        // ...mapGetters({
        //     number: 'countAbout.number',
        //     msg: 'countAbout.msg',
        //     bigNumber: 'countAbout.bigNumber'
        // }),
        ...mapGetters('countAbout',['bigNumber', 'msg'])
    },
    // mounted() {
    //     const x = mapState({ xuexiao: 'school', xueke: 'subject' })
    //     console.log('###', x)
    // },
    methods: {
        // increase() {
        //     // this.$store.state.number = this.$store.state.number + this.n
        //     // this.$store.dispatch('jia', this.n)
        //     this.$store.commit('JIA', this.n)
        // },
        // decrease() {
        //     // this.$store.state.number = this.$store.state.number - this.n
        //     // this.$store.dispatch('jian', this.n)
        //     this.$store.commit('JIAN', this.n)
        // },

        // mutaions 映射必须传递参数，
        // ...mapMutations({
        //     increase: 'JIA',
        //     decrease: 'JIAN'
        // }),
        ...mapMutations('countAbout', {
            increase: 'JIA',
            decrease: 'JIAN'
        }),
        // oodAdd() {
        //     // if (this.n % 2 !== 0) {
        //     //     this.$store.state.number = this.$store.state.number + this.n
        //     // }
        //     this.$store.dispatch('oodAdd', this.n)
        // },
        // waitAdd() {
        //     // setTimeout(() => {
        //     //     this.$store.state.number = this.$store.state.number + this.n
        //     // }, 1000)
        //     this.$store.dispatch('waitAdd', this.n)
        // }
        // 对象写法
        // ...mapActions({
        //     oodAdd: 'oodAdd',
        //     waitAdd: 'waitAdd'
        // })
        // 数组写法
        // ...mapActions(['oodAdd', 'waitAdd'])
        // 模块化 模块名称,['xx']
        ...mapActions('countAbout', ['oodAdd','waitAdd'])
    }
}
</script>

<style scoped>
    .container {
        padding: 5px;
    }
    .item {
        margin-left: 5px;
    }
</style>